<template>
  <div class="MapWarnPanel">
    <div class="MapWarnPanel--header">
      <div class="MapWarnPanel--header__title">{{info.cameraName}}</div>
      <div class="MapWarnPanel--header__close" @click="closeAction"></div>
    </div>
    <div class="MapWarnPanel--content">
      <div class="MapWarnPanel--content__subpanel">
        <div class="title">
          <span>今日预警记录</span>
          <span>(3次)</span>
        </div>
        <div class="content">
          <el-scrollbar height="132px">
            <div class="eventlist">
              <div class="eventlist--item" v-for="(item, i) in info.alarmRecord" :key="i">
                <div class="eventlist--item__point"></div>
                <div class="eventlist--item__dateicon"></div>
                <div class="eventlist--item__time">{{item.time}}</div>
                <div class="eventlist--item__eventicon"></div>
                <div class="eventlist--item__msg one-line">{{item.location}}</div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>

      <div class="MapWarnPanel--content__subpanel">
        <div class="title">
          <span>视频预览</span>
          <span @click="screenFull" class="title--full"></span>
        </div>
        <div class="content">
          <div class="videoContainer" ref="playerDomRef">
            <MySimplePlayer
              ref="mySimplePlayer"
              v-if="$data.siplePalyerInfo"
              :cameraData="$data.siplePalyerInfo">
            </MySimplePlayer>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {getVideoPlayInfo} from '@/api/armyScreenApi.js'
import {ElScrollbar} from "element-plus";
import MySimplePlayer from "@/components/player/MySimplePlayer.vue";

const props = defineProps({
  info: {
    type: Object,
    default() {
      return {
        // "cameraIndexCode": "d90970f42f2e4393ba2de8a8dfaece6c",
        // "cameraName": "研发大会议室",
        // "x": "123",
        // "y": "32",
        // "hasAlarm": true,
        // "alarmRecord": [
        //   {
        //     "time": "2023-10-09 11:10:12",
        //     "location": "1号油料库",
        //     "alarmType": "震动光纤报警"
        //   },
        //   {
        //     "time": "2023-10-09 12:10:12",
        //     "location": "1号收发室",
        //     "alarmType": "温度异常报警"
        //   }
        // ]
      }
    }
  }
})

const $emit = defineEmits(['close'])
const $data = reactive({
  siplePalyerInfo: null
  // siplePalyerInfo: {
  //   "language": "ZH-CN",
  //   "platIp": "10.19.187.58",
  //   "platePort": "443",
  //   "strToken": "SElLIHIzOVdhclNsOXJWTjJNUWI6WGx6QlMvbDY3blBzRmRHTklNYnNTcnBDKytja0F6ZStnTGg2dDBsNXNETT0=",
  //   "protocol": "https",
  //   "imultiRouteId": 0
  // }
})

onMounted(() => {
  getVideoPlayInfo().then(res => {
    console.log('res', res)
    nextTick(() => {
      $data.siplePalyerInfo = {
        indexCode: props.info.cameraIndexCode,
        cameraIndexCode: props.info.cameraIndexCode,
        ...res.data
      }
      // $data.siplePalyerInfo = {
      //   indexCode: props.info.cameraIndexCode,
      //   cameraIndexCode: props.info.cameraIndexCode,
      //   "language": "ZH-CN",
      //   "platIp": "10.19.187.58",
      //   "platePort": "443",
      //   "strToken": "SElLIHIzOVdhclNsOXJWTjJNUWI6WGx6QlMvbDY3blBzRmRHTklNYnNTcnBDKytja0F6ZStnTGg2dDBsNXNETT0=",
      //   "protocol": "https",
      //   "imultiRouteId": 0
      // }
    })
  })
})

function closeAction() {
  $emit('close')
}

const playerDomRef = ref(null)
function screenFull () {
  playerDomRef.value.requestFullscreen()
}
</script>

<style lang="scss" scoped>
.MapWarnPanel {
  width: 464px;
  height: 530px;
  background-image: url('@/assets/images/armyScreen/预警记录bg_2@2x.png');
  background-size: cover;

  display: flex;
  flex-direction: column;

  &--header {
    height: 32px;
    line-height: 32px;
    padding-left: 36px;
    position: relative;

    &__title {
      font-family: PingFangSC-Medium;
      font-size: 16px;
      color: #FFFFFF;
      letter-spacing: 0;
      font-weight: 500;
    }

    &__close {
      width: 24px;
      height: 24px;
      position: absolute;
      right: 8px;
      top: 3px;
      color: #0DFDF0;
      cursor: pointer;
    }
  }

  &--content {
    flex-grow: 1;

    &__subpanel {
      width: 462px;

      &:first-child {
        margin-top: 12px;
        margin-bottom: 16px;
      }

      .title {
        background-image: url('@/assets/images/armyScreen/预警记录_小标题@2x.png');
        background-size: cover;
        height: 30px;
        line-height: 30px;
        padding-left: 36px;

        font-family: PingFangSC-Regular;
        font-size: 16px;
        color: #DBECFB;
        letter-spacing: 0;
        text-shadow: 0 4px 6px rgba(0, 0, 0, 0.45);
        font-weight: 400;

        span:first-child {
          margin-right: 12px;
        }
        &--full{
          background-image: url('@/assets/images/armyScreen/放大@2x.png');
          background-size: cover;
          height: 24px;
          width: 24px;
          float: right;
          margin-right: 8px;
          position: relative;
          top: 5px;
          cursor: pointer;
        }
      }

      .content {
        margin-top: 8px;

        .eventlist {
          padding-left: 36px;

          &--item {
            display: flex;
            height: 32px;
            line-height: 32px;

            &__point {
              width: 9px;
              height: 9px;
              background-image: url('@/assets/images/armyScreen/预警记录_点@2x.png');
              background-size: cover;
              margin-right: 9px;
              position: relative;
              top: 11px;

              &::after {
                position: absolute;
                bottom: -23px;
                left: 4px;
                display: inline-block;
                content: '';
                width: 1px;
                height: 24px;
                border-left: 1px solid rgba(255, 255, 255, 0.23);
              }
            }

            &:last-child {
              .eventlist--item__point {
                &::after {
                  display: none;
                }
              }
            }

            &__dateicon {
              width: 15px;
              height: 15px;
              background-image: url('@/assets/images/armyScreen/预警记录_时间@2x.png');
              background-size: cover;
              margin-right: 12px;
              position: relative;
              top: 8px;
            }

            &__time {
              width: 150px;
              font-family: PingFangSC-Regular;
              font-size: 14px;
              color: #FFFFFF;
              letter-spacing: 0;
              font-weight: 400;
            }

            &__eventicon {
              width: 13px;
              height: 15px;
              background-image: url('@/assets/images/armyScreen/预警记录_内容@2x.png');
              background-size: cover;
              margin-right: 12px;
              position: relative;
              top: 8px;
            }

            &__msg {
              width: 181px;
              font-family: PingFangSC-Regular;
              font-size: 14px;
              color: #FFFFFF;
              letter-spacing: 0;
              font-weight: 400;
            }
          }
        }

        .videoContainer {
          width: 446px;
          height: 245px;
          //background-image: url('@/assets/images/armyScreen/sample1.png');
          //background-size: cover;
          margin: 0 auto;
        }
      }
    }
  }
}
</style>
